<template>
	<view>
		<view class="usertop combg">
			<view class="userimg">
				<image class="avatar" src="@/static/user.png"></image>
				<view class="righttext">
					<view class="title">{{user.name}}</view>
					<view class="datetime">评估时间：{{date}}</view>
				</view>
			</view>
			<view class="detail">
				<view class="detaill">
					<view><text class="gray">性别：</text>{{user.sex}}</view>
				</view>
				<view class="detaill">
					<view><text class="gray">年龄阶段：</text>{{user.age}}</view>
				</view>
			</view>
			<view class="detail">
				<view class="detaill">
					<view><text class="gray">手机：</text>{{user.tel}}</view>
				</view>
			</view>
		</view>
		<view class="report combg">
			<view class="listtitle">
				<image class="titlea" src="@/static/titlec.png"></image><text>测评报告</text>
			</view>
			<view class="subtitle">您的报告已生成，有问题可以咨询老师哟</view>
			<view class="charts-box">
				<qiun-data-charts type="radar" :chartData="chartData" background="none" />
			</view>
			<u-collapse>
				<u-collapse-item v-for="(item, index) in itemList" :key="index">
					<template slot="title">
						<view class="navtitle">
							<view class="verticalline"></view>
							<text>{{item.head}}</text>
							<text class="state" :class="`onstate${item.stateno}`">
								<span>{{item.state}}</span>
							</text>
						</view>
					</template>
					<view class="rate">
						<u-rate :count="count" v-model="item.value" active-color="rgb(254, 189, 0)"></u-rate>
						{{item.value}}分
					</view>
					<u-parse :html="item.body"></u-parse>

				</u-collapse-item>
			</u-collapse>
		</view>
		<view class="organization combg">
			<view class="organizationtitle">
				<image src="@/static/organ.png"></image>
				<text>测评机构</text>
			</view>
			<view class="savebutton" @click="restart">重新评测</view>
		</view>
	</view>
</template>

<script>
	import {
		report
	} from './report'
	export default {
		created: function() {
			var aDate = new Date();
			this.date = aDate.getFullYear() + "年" + (aDate.getMonth() + 1) + "月" + aDate.getDate() + "日";
		},
		onLoad: function(option) {
			this.getMlaform();
			this.chartData.series[0].data = [option.g0 * 3, option.g1 * 3, option.g2 * 3];
			switch (true) {
				case option.g0 < 27:
					this.itemList[0].body = report[0].qdata1answer;
					this.itemList[0].state = '正常';
					this.itemList[0].stateno = 0;
					this.itemList[0].value = ((option.g0) / 30).toFixed(2);
					break;
				case option.g0 < 54:
					this.itemList[0].body = report[1].qdata1answer;
					this.itemList[0].state = '边缘';
					this.itemList[0].stateno = 1;
					this.itemList[0].value = ((option.g0) / 30).toFixed(2);
					break;
				case option.g0 < 72:
					this.itemList[0].body = report[2].qdata1answer;
					this.itemList[0].state = '中度';
					this.itemList[0].stateno = 2;
					this.itemList[0].value = ((option.g0) / 30).toFixed(2);
					break;
				default:
					this.itemList[0].body = report[3].qdata1answer;
					this.itemList[0].state = '严重';
					this.itemList[0].stateno = 3;
					this.itemList[0].value = ((option.g0) / 30).toFixed(2);
					break;
			}

			switch (true) {
				case option.g1 < 27:
					this.itemList[1].body = report[0].qdata2answer;
					this.itemList[1].state = '正常';
					this.itemList[1].stateno = 0;
					this.itemList[1].value = ((option.g1) / 30).toFixed(2);
					break;
				case option.g1 < 54:
					this.itemList[1].body = report[1].qdata2answer;
					this.itemList[1].state = '边缘';
					this.itemList[1].stateno = 1;
					this.itemList[1].value = ((option.g1) / 30).toFixed(2);
					break;
				case option.g1 < 72:
					this.itemList[1].body = report[2].qdata2answer;
					this.itemList[1].state = '中度';
					this.itemList[1].stateno = 2;
					this.itemList[1].value = ((option.g1) / 30).toFixed(2);
					break;
				default:
					this.itemList[1].body = report[3].qdata2answer;
					this.itemList[1].state = '严重';
					this.itemList[1].stateno = 3;
					this.itemList[1].value = ((option.g1) / 30).toFixed(2);
					break;
			}

			switch (true) {
				case option.g2 < 24:
					this.itemList[2].body = report[0].qdata3answer;
					this.itemList[2].state = '正常';
					this.itemList[2].stateno = 0;
					this.itemList[2].value = ((option.g2) / 30).toFixed(2);
					break;
				case option.g2 < 48:
					this.itemList[2].body = report[1].qdata3answer;
					this.itemList[2].state = '边缘';
					this.itemList[2].stateno = 1;
					this.itemList[2].value = ((option.g2) / 30).toFixed(2);
					break;
				case option.g2 < 64:
					this.itemList[2].body = report[2].qdata3answer;
					this.itemList[2].state = '中度';
					this.itemList[2].stateno = 2;
					this.itemList[2].value = ((option.g2) / 30).toFixed(2);
					break;
				default:
					this.itemList[2].body = report[3].qdata3answer;
					this.itemList[2].state = '严重';
					this.itemList[2].stateno = 3;
					this.itemList[2].value = ((option.g2) / 30).toFixed(2);
					break;
			}
		},
		data() {
			return {
				user: {
					name: '',
					sex: '',
					age: '',
					tel: ''
				},
				date: '',
				count: 3,
				itemList: [{
					head: "一.注意力不集中",
					body: '',
					value: 0,
					state: '',
					stateno: '',
					open: false
				}, {
					head: "二.多动-冲动",
					body: '',
					value: 0,
					state: '',
					stateno: '',
					open: false,
				}, {
					head: "三.对立违抗",
					body: '',
					value: 0,
					state: '',
					stateno: '',
					open: false,
				}],
				chartData: {
					categories: [
						"注意力不集中",
						"多动-冲动",
						"对立违抗"
					],
					series: [{
						name: "测评结果分析",
						data: []
					}]
				}
			}
		},
		methods: {
			getMlaform() {
				this.user = JSON.parse(localStorage.getItem('mlaform'));
			},
			restart(){
				localStorage.removeItem('mlaform');
				uni.navigateTo({
					url: '/pages/userform/userform'
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #ffc92a;
	}

	.userimg {
		display: flex;
	}

	.userimg image {
		width: 110rpx;
		height: 110rpx;
	}

	.righttext {
		margin-left: 24rpx;
	}

	.righttext .title {
		font-size: 32rpx;
		color: #594e3f;
		margin-bottom: 28rpx;
	}

	.righttext .datetime {
		color: #857f77;
		font-size: 26rpx;
	}

	.detail {
		padding: 0 20rpx;
		color: #594e3f;
		font-size: 30rpx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		margin: 30rpx auto;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}

	.detail .gray {
		color: #857f77;
		margin-right: 10rpx;
	}

	.subtitle {
		font-size: 26rpx;
		color: #c4bfb8;
		margin: 20rpx auto;
	}

	.navtitle {
		width: 100%;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		font-size: 15px;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		color: #594e3f;
	}

	.navtitle .verticalline {
		width: 3px;
		height: 14px;
		background: #ffc92a;
		border-radius: 2px;
		margin-right: 7px;
	}

	.navtitle .state {
		padding: 0 10px;
		line-height: 22px;
		border-radius: 4px;
		font-size: 13px;
		text-align: center;
		margin-left: 10px;
	}

	.navtitle .onstate0 {
		background: #00e315;
	}

	.navtitle .onstate1 {
		background: #ffe902;
	}

	.navtitle .onstate2 {
		background: #ffbc11;
	}

	.navtitle .onstate3 {
		background: #ff6928;
	}

	.rate {
		margin-bottom: 20rpx;
	}

	.reportc .fff {
		color: #FF6928;
		font-weight: bold;
	}

	.charts-box {
		width: 100%;
		height: 400rpx;
	}
	.organization .organizationtitle image {
		width: 32rpx;
		height: 30rpx;
		vertical-align: middle;
		margin-right: 10rpx;
	}
	
	.organization .organizationtitle text {
		font-size: 28rpx;
		vertical-align: middle;
		color: #857f77;
	}
	
	.savebutton {
		width: 622rpx;
		line-height: 90rpx;
		color: #594e3f;
		font-size: 32rpx;
		font-weight: 700;
		margin: 70rpx auto;
		text-align: center;
		background: url(@/static/savebtn.png) no-repeat 50%/100%;
	}
</style>
